<template>
  <div class="app-container">

    <!--搜索表单-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="板坯号" prop="coilNo">
        <el-input
          v-model="queryParams.coilNo"
          placeholder="请输入板坯号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单号" prop="faNr">
        <el-input
          v-model="queryParams.faNr"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="钢种" prop="grade">
        <el-input
          v-model="queryParams.grade"
          placeholder="请输入钢种"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="板坯宽度" prop="slabWidth">
        <el-input
          v-model="queryParams.slabWidth"
          placeholder="请输入板坯宽度"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="板坯厚度" prop="slabThickness">
        <el-input
          v-model="queryParams.slabThickness"
          placeholder="请输入板坯厚度"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="warning" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--数据表-->
    <el-table
      v-loading="loading"
      :data="slabHistoryList"
      element-loading-text="数据量较大，加载时间较长，请耐心等待... ..."
      stripe
      border
      highlight-current-row
      height="680">
      <!--空状态时的占位提示-->
      <template slot="empty">
        <el-empty>
          <el-button type="primary" @click="resetQuery">刷新试试</el-button>
        </el-empty>
      </template>
      <el-table-column width="50" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="生产序列id" align="center" prop="pgId" width="100"/>
      <el-table-column label="板坯me_id" align="center" prop="slabMeId" width="100"/>
      <el-table-column label="板坯号" align="center" prop="slabNo" width="120"/>
      <el-table-column label="订单号" align="center" prop="faNr" width="170"/>
      <el-table-column label="加热炉入炉钢种" align="center" prop="grade" width="120"/>
      <el-table-column label="板坯宽度" align="center" prop="slabWidth" />
      <el-table-column label="板坯厚度" align="center" prop="slabThickness" />
      <el-table-column label="入炉时间" align="center" prop="hfDbBegin" width="160"/>
      <el-table-column label="出炉时间" align="center" prop="hfDbEnd" width="160"/>
      <el-table-column label="钢卷me_id" align="center" prop="coilNo" width="120"/>
      <el-table-column label="钢卷号" align="center" prop="coilNo" width="120"/>
      <el-table-column label="轧制钢种" align="center" prop="steelGrade" width="100"/>
      <el-table-column label="钢卷厚度" align="center" prop="hsmThickness" />
      <el-table-column label="钢卷宽度" align="center" prop="hsmWidth" />
      <el-table-column label="钢卷重量" align="center" prop="hsmWeight" />
      <el-table-column label="钢卷长度" align="center" prop="hsmLength" />
      <el-table-column label="进轧机时间" align="center" prop="hsmDbBegin" width="160"/>
      <el-table-column label="出轧机时间" align="center" prop="hsmDbEnd" width="160"/>
    </el-table>

    <!--分页-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { listSlabHistory } from "@/api/showcase/showcase_1580/slabHistory1580.js";


export default {
  name: "SlabHistory1580",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 板坯历史 表格数据
      slabHistoryList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        slabNo: null,
        faNr: null,
        grade: null,
        slabWidth: null,
        slabThickness: null,
      },

    };
  },

  created() {
    this.getList();
  },


  methods: {
    /** 查询展示台 列表 */
    getList() {
      this.loading = true;
      listSlabHistory(this.queryParams).then(response => {
        this.slabHistoryList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

  }
};
</script>

<style scoped>

</style>
